<template>
  <view class="container">
    <view style="height: 10rpx"></view>
    <view class="user-list">

      <view class="user-item" v-for="(item,index) in patientPaging.accumulator" :key="index" @click="choosePatient(item)">
        <view class="first-row">
          <text class="name">{{item.patientName}}</text>
          <text class="phone">{{item.patientPhone}}</text>
        </view>
        <view class="second-row">
          <text class="sex">{{item.patientSex==1?'男':'女'}}</text>
          <text class="age">{{item.patientAge?item.patientAge+'岁':''}}</text>
          <text class="id-key">身份证：</text>
          <text class="id-value">{{item.patientIdcard}}</text>
        </view>
        <view class="third-row">
          <view>
            <view class="default" v-if="item.is_default==1">默认</view>
          </view>
          <view class="icon-content">
            <view @click.stop="toEditPatient(item.id)">
              <u-icon class="edit" name="edit-pen-fill"></u-icon>
            </view>
            <view @click.stop="showDeleteModal(item.id)">
              <u-icon class="delete" name="trash-fill"></u-icon>
            </view>
          </view>
        </view>
      </view>

    </view>

    <view style="height: 120rpx;background-color: #EDEDED"></view>
    <view class="btn-container" @click="toEditPatient('')">
      <view class="content">新增用药人</view>
    </view>

  </view>
</template>

<script>
  import {PatientList} from "../../model/prescription/PatientList";

  export default{
    data(){
      return {
        patientPaging: null
      }
    },
    onShow() {
      this.getPatientList()
    },
    onReachBottom() {
      this.patientPaging.getMoreData()
    },
    methods:{

      async getPatientList() {
        this.patientPaging = PatientList.getLatestPaging(this.$baseUrl)
        await this.patientPaging.getMoreData()
      },

      toEditPatient(id) {
        wx.navigateTo({
          url: `/pages/prescription/editPatient?id=${id}`
        })
      },

      showDeleteModal(id) {
        let _this = this
        wx.showModal({
          title: '提示',
          content: '是否删除该用药人?',
          success (res) {
            if (res.confirm) {
                _this.delUserDrug(id)
            }
          },
          fail:err=>{
            console.log(err)
          }
        })
      },

        async delUserDrug(id) {
            let res = await this.$api.delUserDrug({id}, this.$baseUrl)
            let icon = ''
            if (res.data.level === 'success') {
                icon = 'success'
                await this.getPatientList()
            } else {
                icon = 'none'
            }
            this.$currency.showToast(res.data.message, icon)
        },

      choosePatient(item) {
        this.$store.state.patient = item
        wx.navigateBack()
      }

    },

  }
</script>

<style lang="scss" scoped>
  .container{
    min-height: 100vh;
    padding: 0 20rpx;
    background-color: #EDEDED;
  }

  .user-list{
    .user-item{
      background-color: #ffffff;
      padding: 20rpx 15rpx;
      border-radius: 20rpx !important;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-bottom: 20rpx;
      .first-row,.second-row,.third-row{
        display: flex;
        align-items: center;
      }
      .first-row{
        .name{
          color: #333333;
          font-size: 28rpx;
          font-weight: bold;
        }
        .phone{
          font-size: 24rpx;
          margin-left: 16rpx;
          color: grey;
        }
      }
      .second-row{
        padding: 15rpx 0;
        font-size: 24rpx;
        color: #333333;
        .id-key,.id-value{
          color: grey;
        }
        .age{
          margin: 0 20rpx;
        }
      }
      .third-row{
        justify-content: space-between;
        .default{
          color: grey;
          padding: 5rpx;
          border: 2rpx solid #EDEDED;
          font-size: 24rpx;
          border-radius: 15rpx;
          padding: 0 16rpx;
        }
        .icon-content{
          display: flex;
          .edit{
            padding: 20rpx;
          }
          .delete{
            padding: 20rpx;
            margin-left: 20rpx;
            color: red;
          }
        }
      }
    }
  }

  .btn-container{
    display:flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 120rpx;
    position: fixed;
    bottom: 0;
    color: #ffffff;
    background-color: #EDEDED;
    .content{
      width: 75%;
      height: 90rpx;
      background-color: #09C15F;
      border-radius: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }



</style>
